<template>
  <div class="mc-bubble" :class="[align === 'right' ? 'mc-bubble-right' : 'mc-bubble-left']">
    <div v-if="avatarConfig && align !== 'right'" class="mc-avatar">
      <img :src="avatarConfig.imgSrc" :width="avatarConfig.width || 32" :height="avatarConfig.height || 32" />
    </div>
    <div class="mc-bubble-content">
      <div v-if="loading" class="mc-loading">
        <div class="mc-loading-dot"></div>
        <div class="mc-loading-dot"></div>
        <div class="mc-loading-dot"></div>
      </div>
      <div v-else-if="$slots.default">
        <slot></slot>
      </div>
      <div v-else class="mc-text">{{ content }}</div>
      <slot name="bottom"></slot>
    </div>
    <div v-if="avatarConfig && align === 'right'" class="mc-avatar">
      <img :src="avatarConfig.imgSrc" :width="avatarConfig.width || 32" :height="avatarConfig.height || 32" />
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  content: {
    type: String,
    default: '',
  },
  align: {
    type: String,
    default: 'left',
  },
  loading: {
    type: Boolean,
    default: false,
  },
  avatarConfig: {
    type: Object,
    default: () => null,
  },
});
</script>

<style scoped>
.mc-bubble {
  display: flex;
  margin-bottom: 16px;
  gap: 8px;
}

.mc-bubble-left {
  justify-content: flex-start;
}

.mc-bubble-right {
  justify-content: flex-end;
}

.mc-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
}

.mc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mc-bubble-content {
  max-width: 70%;
  padding: 12px;
  border-radius: 8px;
  background-color: var(--devui-base-bg, #ffffff);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mc-bubble-right .mc-bubble-content {
  background-color: var(--devui-brand, #5e7ce0);
  color: white;
}

.mc-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.mc-loading {
  display: flex;
  gap: 4px;
}

.mc-loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--devui-text, #252b3a);
  animation: loading 1.4s infinite ease-in-out both;
}

.mc-loading-dot:nth-child(1) {
  animation-delay: -0.32s;
}

.mc-loading-dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes loading {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
</style> 